<!-- 商品发布 - 会员折扣 -->
<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" :disabled="isDetail">
    <div
      class="p-10px border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)] font-size-14px"
    >
      会员折扣设置
    </div>
    <el-form-item label="普通会员折扣" prop="memberDiscount">
      <div class="w-100%">
        <el-radio-group
          v-model="formData.memberDiscount"
          @change="onMemberchange('memberDiscount')"
        >
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_M1_TYPES)"
            :key="dict.value"
            :value="dict.value"
            :disabled="dict.value == 3 && memberLevelList.length == 0"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </el-form-item>
    <template v-if="formData.memberDiscount == 3">
      <el-form-item v-if="!formData.specType">
        <SkuListMemberShip
          ref="skuListMembershipRef"
          :prop-form-data="formData"
          :property-list="propertyList"
          :rule-config="memberDiscountRuleConfig"
          :rule-type="'memberDiscount'"
          :value-type="'memberDiscountEntry'"
          :membership-level-list="memberLevelList"
          :select-type-list="discountTypes"
        />
      </el-form-item>
      <template v-if="formData.specType && propertyList.length > 0">
        <el-form-item v-if="!isDetail" label="批量设置">
          <SkuListMemberShip
            :is-batch="true"
            :prop-form-data="formData"
            :property-list="propertyList"
            :rule-type="'memberDiscount'"
            :membership-level-list="memberLevelList"
            :value-type="'memberDiscountEntry'"
            :select-type-list="discountTypes"
          />
        </el-form-item>
        <el-form-item label="规格列表">
          <SkuListMemberShip
            ref="skuListMembershipRef"
            :is-detail="isDetail"
            :prop-form-data="formData"
            :property-list="propertyList"
            :rule-config="memberDiscountRuleConfig"
            :rule-type="'memberDiscount'"
            :membership-level-list="memberLevelList"
            :value-type="'memberDiscountEntry'"
            :select-type-list="discountTypes"
          />
        </el-form-item>
      </template>
    </template>

    <el-form-item label="付费会员折扣" prop="paidmemberDiscount">
      <div class="w-100%">
        <el-radio-group
          v-model="formData.paidmemberDiscount"
          @change="onPaidMemberchange('paidmemberDiscount')"
        >
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_PM1_TYPES)"
            :key="dict.value"
            :value="dict.value"
            :disabled="dict.value == 3 && paidMemberLevelList.length == 0"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </el-form-item>
    <template v-if="formData.paidmemberDiscount == 3">
      <el-form-item v-if="!formData.specType">
        <SkuListPaidMemberShip
          ref="skuListPaidMembershipRef"
          :prop-form-data="formData"
          :property-list="propertyList"
          :rule-config="paidmemberDiscountRuleConfig"
          :rule-type="'paidmemberDiscount'"
          :paid-membership-level-list="paidMemberLevelList"
          :value-type="'paidmemberDiscountEntry'"
          :select-type-list="discountTypes"
        />
      </el-form-item>
      <template v-if="formData.specType && propertyList.length > 0">
        <el-form-item v-if="!isDetail" label="批量设置">
          <SkuListPaidMemberShip
            :is-batch="true"
            :prop-form-data="formData"
            :property-list="propertyList"
            :rule-type="'paidmemberDiscount'"
            :paid-membership-level-list="paidMemberLevelList"
            :value-type="'paidmemberDiscountEntry'"
            :select-type-list="discountTypes"
          />
        </el-form-item>
        <el-form-item label="规格列表">
          <SkuListPaidMemberShip
            ref="skuListPaidMembershipRef"
            :is-detail="isDetail"
            :prop-form-data="formData"
            :property-list="propertyList"
            :rule-config="paidmemberDiscountRuleConfig"
            :rule-type="'paidmemberDiscount'"
            :paid-membership-level-list="paidMemberLevelList"
            :value-type="'paidmemberDiscountEntry'"
            :select-type-list="discountTypes"
          />
        </el-form-item>
      </template>
    </template>
  </el-form>
</template>
<script lang="ts" setup>
import type { Spu } from '@/api/mall/product/spu'
import { PropType } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { copyValueToTarget } from '@/utils'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

import {
  getPropertyList,
  PropertyAndValues,
  RuleConfig,
  SkuListMemberShip,
  SkuListPaidMemberShip
} from '@/views/mall/product/spu/components/index'

defineOptions({ name: 'ProductPermissionForm' })
const memberDiscountRuleConfig: RuleConfig[] = []
const paidmemberDiscountRuleConfig: RuleConfig[] = []

const message = useMessage() // 消息弹窗

const props = defineProps({
  propFormData: {
    type: Object as PropType<Spu>,
    default: () => {}
  },
  activeName: propTypes.string.def(''),
  isDetail: propTypes.bool.def(false), // 是否作为详情组件
  memberLevelList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  paidMemberLevelList: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})

const formRef = ref() // 表单Ref
const propertyList = ref<PropertyAndValues[]>([]) // 商品属性列表
const skuListMembershipRef = ref() // 商品属性列表 Ref
const skuListPaidMembershipRef = ref()
const discountTypes = [
  {
    typeName: '固定金额',
    typeCode: 1
  },
  {
    typeName: '折扣比例',
    typeCode: 0
  }
]
// 表单数据
const formData = ref<Spu>({
  specType: false, // 商品规格
  subCommissionType: false, // 分销类型
  subCommissionEnable: false, //分销开关
  skus: [],
  /** 会员折扣设置 */
  memberDiscount: 0, //会员折扣
  memberDiscountEntry: {}, //会员折扣单独设置
  /** 付费会员折扣设置 */
  paidmemberDiscount: 0, //付费会员折扣设置
  paidmemberDiscountEntry: {} //付费会员折扣单独设置
})
// 表单规则
const rules = reactive({})

/**会员选择改变 */
const onMemberchange = (type: any) => {
  console.log(formData.value[type])
  // Object.assign(props.propFormData, formData.value)
}

const onPaidMemberchange = (type: any) => {
  console.log(formData.value[type])
  // Object.assign(props.propFormData, formData.value)
}

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData.value, data)
    propertyList.value = getPropertyList(data)
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => formData.value,
  () => {
    Object.assign(props.propFormData, formData.value)
  },
  {
    deep: true,
    immediate: true
  }
)
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    skuListMembershipRef.value?.validateSku()
    skuListPaidMembershipRef.value?.validateSku()
    await unref(formRef)?.validate()
    if (formData.value.memberDiscount != 3) {
      formData.value.memberDiscountEntry = {}
    }
    if (formData.value.paidmemberDiscount != 3) {
      formData.value.paidmemberDiscountEntry = {}
    }

    Object.assign(props.propFormData, formData.value)
  } catch (e) {
    message.error('【会员折扣设置】不完善，请填写相关信息')
    emit('update:activeName', 'vipDiscounts')
    throw e // 目的截断之后的校验
  }
}

defineExpose({ validate })
</script>
